<template>
	<view>
		<view class="graphic-content">
			<view class="top-block">
				<avatar :avatarUrl="graphic.avatarUrl"
				@clickAvatr="clickAvatr"
				@clickAttention="clickAttention"
				:showAttention="!graphic.isAttention && $store.user.uid != graphic.uid"
				:time="graphic.sendTime"
				:nickname="graphic.nickName"/>
			</view>
			<view class="content-block" @click="contentClick">
				<view class="content-text">
					<text selectable space="nbsp">
						{{graphic.contentText}}
					</text>
				</view>
				
				<view class="content-imgs flex-ali-center" 
				v-if="graphic.contentType == 2" 
				:class="JSON.parse(graphic.imgList).length > 1 ? 'more-img':'only-one-img'">
					<block v-for="(item, index) in JSON.parse(graphic.imgList)">
						<view>
							<image @click="clickImg" 
							:src="item" mode="heightFix"
							:data-imgUrl="item"></image>
						</view>
					</block>
				</view>
				
				<view class="content-videos" @click.stop="clickVideo" v-if="graphic.contentType == 3">
					<view class="video-item">
						<view class="fillter" :style='{"backgroundImage": `url("${graphic.videoCover}")`}'>
							<view></view>
						</view>
						<image :src="graphic.videoCover" mode="heightFix"></image>
						<view class="play-btn iconfont icon-bofang"></view>
						<view class="play-info iconfont">{{playNum(graphic.playNum)}}次播放 2:30</view>
					</view>
				</view>
				
			</view>
			<view class="topic-block">
				<block v-for="(item, index) in (graphic.funTagName ? JSON.parse(graphic.funTagName):[])">
					<text >#{{item}}</text>
				</block>
			</view>
			<view class="bottom-block flex-ali-center flex-juscon-bet">
				<view class="comments-wrap iconfont icon-xiaoxi2" @click="clickInput"> 说点什么</view>
				<view class="operation-wrap flex-ali-center">
					<view class="operation-item flex-ali-center" @click="likeFun">
						<view class="iconfont icon-hanhan-01-01" :style="{'color' : graphic.isClick ? '#FF4400':'#999999'}"></view>
						<view class="operation-num">{{graphic.likeNum}}</view>
					</view>
					<view class="operation-item flex-ali-center" @click="clickComment">
						<view class="iconfont icon-xiaoxi2"></view>
						<view class="operation-num">{{graphic.commentNum}}</view>
					</view>
					<view class="operation-item flex-ali-center" @click="forwardFun">
						<view class="iconfont icon-gongneng_pinglun"></view>
						<view class="operation-num">{{graphic.forwardNum}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import avatar from '@/components/avatar/avatar.vue';
	import {TheFun} from '@/model/theFun.js';
	import {utils} from '@/utils/utils.js';
	export default {
		data() {
			return {
				noneWrap: 500,
				commentsContent:'',
				showToolBar:false
			};
		},
		props:{
			graphic:{
				type:Object,
				default:function(){
					return {}
				}
			},
			pageIndex:{
				type:Number,
				default:0
			},
			dataIndex:{
				type:Number,
				default:0
			}
		},
		async created() {
			let res = uni.getSystemInfoSync();
			this.noneWrap = res.windowHeight - uni.upx2px(100)
			this.isClick = this.graphic.isClick
		},
		components:{
			avatar
		},
		computed:{
			
		},
		methods:{
			playNum(e){
				if(e > 10000){
					return (e / 1000).toFixed(3) + "K"
				}
				if(e > 100000){
					return (e / 10000).toFixed(3) + "W"
				}
				return e
			},
			videoTime(time){
				return utils.formatTime(time)
			},
			contentClick(){
				this.$emit('contentClick', this.graphic)
			},
			clickVideo(){
				this.$emit('clickVideo', this.graphic)
			},
			clickAvatr(){
				this.$emit("clickAvatr",this.graphic)
			},
			clickAttention(){
				this.$emit('clickAttention',this.graphic.uid)
			},
			likeFun(){
				this.$emit("likeFun",{
					data:this.graphic,
					index:this.pageIndex,
					dataIndex:this.dataIndex
				})
			},
			isReady(){
				this.showToolBar = true
			},
			clickImg(e){
				uni.previewImage({
					urls: JSON.parse(this.graphic.imgList),
					current:e.target.dataset.imgUrl,
					longPressActions: {
					   itemList: ['发送给朋友', '保存图片', '收藏'],
					   success: function(data) {
						   console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					   },
					   fail: function(err) {
						   console.log(err.errMsg);
					   }
					}
				});
			},
			clickInput(){
				this.$emit("clickInput", this.graphic)
			},
			forwardFun(){
				this.$emit("forwardFun",this.graphic.id)
			},
			clickComment(){
				this.$emit("clickComment",this.graphic)
			}
		}		
	}
</script>

<style lang="scss" scoped>
	.graphic-content{
		padding: 10rpx;
		box-sizing: border-box;
		background-color: #FFF;
		.top-block{
			.avatr-nick-wrap{
				.avatr-img{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.nick-name-wrap{
					margin-left: 10rpx;
					.nick-name{
						font-size: 24rpx;
						color: #333;
					}
					.posted-time{
						font-size: 16rpx;
						color: #999999;
					}
				}
			}
			.attention-btn{
				margin-right: 40rpx;
				padding: 10rpx 20rpx;
				font-size: 20rpx;
				background-color: #EEEEEE;
				color: #333333;
				border-radius: 10rpx;
				
			}
		}
		.content-block{
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #333333;
			.content-imgs.only-one-img{
				view{
					height: 100%;
					margin: 10rpx;
					overflow: hidden;
					image{
						max-height: 400rpx;
						max-width: 100%;
					}
				}
			}
			.content-imgs.more-img{
				flex-wrap: wrap;
				view{
					width: 30%;
					height: 200rpx;
					margin: 5rpx;
					text-align: center;
					overflow: hidden;
					background-color: #000;
					image{
						// max-width: 100%;
						max-height: 200rpx;
					}
				}
			}
			.content-videos{
				.video-item{
					background-color: #000;
					border-radius: 10rpx;
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 225px;
					margin: 10rpx 0;
					position: relative;
					.fillter{
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						height: 300px;
						width: 150%;
						background-repeat: no-repeat;
						background-size: 100%;
						background-image: url("https://campus-fun.oss-cn-beijing.aliyuncs.com/JIETU/df551cb5-b226-4037-ba72-5ba9625957f5.jpg");
						filter: blur(10px);
						view{
							background-color: #000;
							position: absolute;
							top: 0;
							bottom: 0;
							right: 0;
							left: 0;
							opacity: 0.5;
						}
					}
					image{
						max-width: 100%;
						max-height: 100%;
						margin: 10rpx auto;
					}
					.play-btn{
						font-size: 120rpx;
						color: #FFF;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);
					}
					.play-info{
						position: absolute;
						bottom: 10rpx;
						right: 10rpx;
						font-size: 20rpx;
						color: #FFF;
						background-color: rgba(0,0,0,0.3);
						border-radius: 20rpx;
						padding: 10rpx 20rpx;
					}
				}
			}
		}
		.topic-block{
			margin-top: 10rpx;
			text{
				color: $fun-link-text-color;
				font-size: 26rpx;
				margin-right: 10rpx;
			}
		}
		.bottom-block{
			margin-top: 20rpx;
			.comments-wrap{
				font-size: 20rpx;
				color: $fun-text-9-color;
				background-color: #f2f2f2;
				width: 350rpx;
				box-sizing: border-box;
				padding: 14rpx 20rpx;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
			}
			.operation-wrap{
				font-size: 26rpx;
				color: $fun-text-9-color;
				.operation-item{
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
